<template>
  <el-row :gutter="20" ref="row" style="height: 100%">
    <el-col :span="6" v-for="(item, index) in network" :key="index">
      <div class="chartTitle" @click="HandleCli">{{ item.title }}</div>
      <div style="height: calc(100% - 40px)">
        <BarChart
          :title="item.title"
          :category="item.category"
          :bar-data="item.barData"
          :show-legend="showLegend"
          :showy-axis="showyAxis"
        />
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import BarChart from "@/components/ECharts/components/barChart.vue";

const showLegend = false;
const showyAxis = false;

const network = [
  {
    title: "移动网络质量",
    category: ["移动", "电信"],
    barData: [[78.64, 78.73]]
  },
  {
    title: "家宽上网质量",
    category: ["移动", "电信"],
    barData: [[73.99, 74.48]]
  },
  {
    title: "家宽装维服务",
    category: ["移动", "电信"],
    barData: [[85.96, 88.48]]
  },
  {
    title: "政企产品质量",
    category: ["专线客户", "企业宽带", "物联网卡服务"],
    barData: [[98.67, 98.81, 0]]
  }
];

const emit = defineEmits(["clickEvent"]);

const HandleCli = (item: any) => {
  emit("clickEvent", "家宽满意度", [item]);
};
</script>

<style scoped lang="scss"></style>
